<script setup>
import { ref, onMounted } from "vue";
import { listaction } from "@/api/topic";
import NavBar from "@/components/NavBar.vue";
import { useRouter } from "vue-router";

const router = useRouter();
const list = ref([]);
const loading = ref(false);
const finished = ref(false);
const page = ref(1);
const total = ref(0);
const refreshing = ref(false);

const onLoad = () => {
  // 异步更新数据
  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
  getTopicData().then((res) => {
    if (refreshing.value) {
      list.value = [];

      refreshing.value = false;
    }
    console.log("res=>", res);
    total.value = res.total;
    list.value.push(...res.data);
    page.value++;
    // 取消进度条
    loading.value = false;
    if (page.value > total.value) {
      finished.value = true;
    }
  });
};

// 获取专题数据
const getTopicData = () => {
  return listaction({
    page: page.value,
  });
};

const onRefresh = () => {
  // 清空列表数据
  page.value = 1;
  finished.value = false;
  // 重新加载数据
  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  loading.value = true;
  onLoad();
};

const goDetail = (id) => {
  router.push({ path: "/topicdetail", query: { id: id } });
};
</script>

<template>
  <van-sticky>
    <NavBar title="专题" leftText=""></NavBar>
  </van-sticky>

  <div class="topic-container">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        :immediate-check="true"
      >
        <div
          class="item"
          @click="goDetail(item.id)"
          v-for="item in list"
          :key="item.id"
        >
          <img class="item-img" :src="item.scene_pic_url" alt="" />
          <div class="title">{{ item.title }}</div>
          <div class="sub-title">{{ item.subtitle }}</div>
          <div class="price">{{ item.price_info }}元起</div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<style scoped lang="scss">
.topic-container {
  padding-bottom: 100px;
  padding-left: 20px;
  padding-right: 20px;
}
.item {
  &:nth-child(1) {
    margin-top: 20px;
  }
  background-color: #fff;
  margin-bottom: 40px;
  padding-bottom: 29px;
  .item-img {
    width: 710px;
    height: 343px;
    // vertical-align: top;
    display: block;
  }
  .title {
    margin-top: 32px;
    font-family: PingFangSC-Medium;
    font-size: 30px;
    color: #333333;
    font-weight: 500;
    text-align: center;
  }
  .sub-title {
    font-family: PingFangSC-Regular;
    font-size: 26px;
    color: #999999;
    text-align: center;
  }
  .price {
    margin-top: 16px;
    font-family: PingFangSC-Semibold;
    font-size: 26px;
    color: #9e4242;
    font-weight: 600;
    text-align: center;
  }
}
</style>
